// 1.1 获取裁剪区域的 DOM 元素
var $image = $("#image");
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".img-preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);
$("#btnChooseImage").on("click", function () {
  $("#file").click();
});
// 为文件选择框绑定 change 事件
$("#file").on("change", function (e) {
  // 获取用户选择的文件
  console.dir(e.target);
  var filelist = e.target.files;
  if (filelist.length === 0) {
    return layer.msg("请选择照片！");
  }
  console.log(filelist);
  // 1. 拿到用户选择的文件
  var file = e.target.files[0];
  // 2. 将文件，转化为路径
  var imgURL = URL.createObjectURL(file);
  // 3. 重新初始化裁剪区域
  $image
    .cropper("destroy") // 销毁旧的裁剪区域
    .attr("src", imgURL) // 重新设置图片路径
    .cropper(options); // 重新初始化裁剪区域
});
$("#upload").on("click", function () {
  //创造base64格式的字符串照片
  let dataURL = $image
    .cropper("getCroppedCanvas", {
      //   创建一个画布
      width: 100,
      height: 100,
    })
    .toDataURL("image/jpeg");
  $.ajax({
    method: "post",
    url: "/my/update/avatar",
    data:{
      avatar: dataURL
    },
    success: (res) => {
      if (res.status !== 0) {
        return layer.msg("更换头像失败");
      }
      layer.msg("更换头像成功");
      window.parent.getUserInfo();
    },
  });
});
